<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>更新阶段</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/VUE/vue2.js"></script>
</head>
<body>
<div id="box">
    {{ myname }}
</div>
<script>
    new Vue({
        el: "#box",
        data: {
            myname: "最爱吃兽奶"
        },
        mounted() {
            // 两秒后进行数据更新
            setTimeout(() => {
                this.myname = this.myname + "111111"
                // 创建虚拟dom，diff对比，再渲染真实dom，需要一定的时间   ---》 而状态立即更新，dom异步更新，  如果立即访问dom节点只能得到老节点
                console.log(document.getElementById("box").innerHTML)
            }, 2000)
        },

        beforeUpdate() {
            console.log("beforeUpdate", "更新之前，记录老的dom状态，比如滚动条位置记录")
        },
        updated() {
            console.log("updated", "更新完成，获取更新后的dom，才进行swiper工作插件")
        }

    })
</script>
</body>
</html>